<template>
  <el-checkbox
    class="mr-[30px]!"
    :model-value="checkAll"
    :indeterminate="isIndeterminate"
    @change="handleCheckAllChange"
  >
    {{ label ?? '全选' }}
  </el-checkbox>
</template>
<script setup lang='ts'>
interface propMsg {
  options: any[]
  label?: string
}
// const emit = defineEmits([])
const props = withDefaults(defineProps<propMsg>(), {
})
const {options, label} = toRefs(props)
const modelValue = defineModel<(string | number)[]>('modelValue', {
  default: () => []
})

const checkAll = computed(() => {
  return modelValue.value?.length === options.value.length
})
const isIndeterminate = computed(() => {
  return modelValue.value?.length > 0 && modelValue.value.length < options.value.length
})
const handleCheckAllChange = (val: any) => {
  modelValue.value = val ? options.value.map((item: any) => item.value) : []
}

  
</script>
<style scoped lang='scss'>
  
</style>